<template>
  <div class="main">
    <div class="table-title">
      <div>
        <i class="el-icon-s-unfold"></i>
        <span
          ><el-link :href="'/api/business/download?userid=' + userinfo._id"
            >导出</el-link
          ></span
        >
      </div>
      <div>
        <i class="el-icon-s-tools"></i>
        <span>字段管理</span>
      </div>
      <div>
        <i class="el-icon-menu"></i>
        <span>精简视图</span>
      </div>
      <div>
        <i class="el-icon-search"></i>
        <span>搜索</span>
      </div>
    </div>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40"> </el-table-column>
      <el-table-column 
      show-overflow-tooltip v-for="(item,index) in clo" :key="index" :prop="item.prop" :label="item.label" :formatter="item.formater">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- scope.row 当前行的 数据对象 -->
          <!-- scope.$index 当前行的 数据对象的索引 -->
          <el-button
            @click.native.prevent="deleteRow(scope.row._id)"
            type="danger"
            size="small"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: ["tableData", "total","deleteRow","handleCurrentChange","clo"],
  computed: {
    ...mapState(["userinfo"]),
  },
  methods: {
    handleSelectionChange(val) {
      //全选相关
      this.multipleSelection = val;
    },
  },
};
</script>

<style lang="scss">
.main {
  margin: 10px 20px;
  border: 1px solid #e6e6e6;
  .table-title {
    padding: 12px 0;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    font-size: 14px;
    color: #909399;
    div {
      border-left: 1px solid #e6e6e6;
      padding: 0 10px;
      cursor: pointer;
      i {
        margin-right: 10px;
      }
      a {
        vertical-align: bottom;
        color: inherit;
      }
    }
  }
}
</style>